import { Modal, Form, Input, message } from 'antd';
import React, { useState } from 'react';

import styles from '@/pages/Login/MsnLogin/index.less';
import { forgetPsd } from '@/services/login';
import { getErrorMsg, handleCountDown } from '@/util/utils';
interface Props {
  isModalVisible: boolean;
  handleOk: (a: any) => void;
  handleCancel: () => void;
}
export default function ForgetPassCode(props: Props) {
  const { isModalVisible, handleOk, handleCancel } = props;
  const [form] = Form.useForm();
  const [countDownSecond, setCountDownSecond] = useState(60);
  const [verificationCode, setVerificationCode] = useState(false);
  const getCode = async () => {
    const values = form.getFieldsValue();
    const phoneNumber = form.getFieldValue('mobileNo');
    const pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if (phoneNumber !== '' && pattern.test(phoneNumber)) {
      setVerificationCode(true);
      handleCountDown(60, setCountDownSecond, setVerificationCode);
    } else {
      message.warn('先填入正确手机号');
      return;
    }
    const res = await forgetPsd({
      mobileNo: values.mobileNo,
    });
    if(res.code===200) {
      message.success('发送成功!');
    } else {
      message.error(getErrorMsg(res));
    }
  };
  return (
    <>
      <Modal title="忘记密码" visible={isModalVisible} onOk={() => handleOk(form)} onCancel={handleCancel} >
        <Form
          form={form}
          name="ForgetPassword"
          autoComplete="off"
        >
          <Form.Item
            label="手机号"
            name="mobileNo"
            rules={[{ required: true, message: '请输入手机号!' }]}
          >
            <Input placeholder={'请输入手机号'} />
          </Form.Item>
          {
            <Form.Item
              label="验证码"
              name="mobileVerifyCode"
              rules={[{ required: true, message: '请输入验证码!' }]}
            >
              <Input
                placeholder="请输入验证码"
                suffix={
                  <div
                    style={
                      verificationCode
                        ? { pointerEvents: 'none', cursor: 'pointer' }
                        : { cursor: 'pointer' }
                    }
                    onClick={getCode}
                    className={styles.getCode}
                  >
                    <span>|</span> &nbsp;
                    {verificationCode ? (
                      `${countDownSecond}秒后重发`
                    ) : (
                      <span style={{ color: '#1A3DC9' }} className={styles.getCodeColor}>获取验证码</span>
                    )}
                  </div>
                }
              />
            </Form.Item>
          }
          <Form.Item
            label="新密码"
            name="password"
            rules={[{ required: true, message: '请输入新密码!' }]}
          >
            <Input placeholder='请输入新密码' type={'password'} />
          </Form.Item>
          <Form.Item
            label="验证新密码"
            name="passwordConfirm"
            rules={[{ required: true, message: '请再次输入新密码!' }]}
          >
            <Input placeholder='请再次输入新密码' type={'password'} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}
